import _ from "lodash";
import React from "react";
import { InputGroup } from "../component/input_item";
import { AddOneItem, UpdateOneItem } from "../operation/basic_info";
import { BasicInfoItem } from "../operation/table_data_model";

const REQUIRED_DATA = ['desc', 'password', 'userName', 'site']
const updateKey = "$codebook-updateobj"
const initialState = {
    currentMode: 'plus',
    desc: '',
    password: '',
    userName: '',
    site: 'https://',
    phone: '',
    remark: '',
}
export default class AddItem extends React.PureComponent<any, any> {
    constructor(props) {
        super(props);
        let updateInfo:any = window.sessionStorage.getItem(updateKey)
        let currentMode = "plus"
        if (!_.isEmpty(updateInfo)) {
            updateInfo = JSON.parse(updateInfo)
            currentMode = "edit"
        }
        let defaultState;
        if (currentMode === 'edit') {
            defaultState = {...updateInfo}
        } else {
            defaultState = {...initialState};
        }
        this.state = {
            ...defaultState,
            currentMode,
        }
    }
    setValue = (e) => {
        let name = e.target.name;
        this.setState({[name]: e.target.value})
    }
    doAddItem = () => {
        let {desc, password, userName, site, phone, email, remark} = this.state;
        let data: BasicInfoItem = {desc, password, userName, site, phone, email, remark}
        for (let x of REQUIRED_DATA) {
            if (_.isEmpty(data[x])) {
                alert("Please input:" + x)
                return;
            }
        }
        if (this.state.currentMode === 'plus') {
            AddOneItem(data).then(v => {
                alert("数据处理完成!")
            }).catch(e => {
                console.error("add err:", e)
                alert(e.message)
            })
        } else {
            UpdateOneItem({...data, id: this.state.id})
                .then(v => {alert("更新完成！"); this.cancelEdit();})
                .catch(e => {
                    console.error(e)
                    alert(e.message)
                })
        }
    }
    cancelEdit = () => {
        window.sessionStorage.removeItem(updateKey)
        this.setState({
            ...initialState,
            currentMode: 'plus',
        })
    }
    
    render() {
        return (<div>
            <InputGroup placeholder="简要描述" value={this.state.desc} valueSetter={this.setValue} icon="sticky-note" name="desc"/>
            <InputGroup placeholder="登录用户名" value={this.state.userName} valueSetter={this.setValue} icon="user" name="userName"/>
            <InputGroup placeholder="密码" value={this.state.password} valueSetter={this.setValue} icon="key" name="password"/>
            <InputGroup placeholder="站点" value={this.state.site} valueSetter={this.setValue} icon="home" name="site"/>
            <InputGroup placeholder="注册手机" value={this.state.phone} valueSetter={this.setValue} icon="phone" name="phone"/>
            <InputGroup placeholder="注册邮箱" value={this.state.email} valueSetter={this.setValue} icon="envelope" name="email"/>
            <InputGroup placeholder="备注" type="textarea" value={this.state.remark} valueSetter={this.setValue} icon="marker" name="remark"/>
            <div className="d-flex justify-content-end mt-2">
                <button onClick={this.doAddItem} className="btn btn-primary btn-sm">
                    <i className={`fas fa-${this.state.currentMode}`}></i>&nbsp;{this.state.currentMode === 'plus'? '新增':'更新'}
                </button>
                {
                    this.state.currentMode === 'edit' &&
                    <button onClick={this.cancelEdit} className="btn btn-secondary btn-sm ms-3">
                        <i className="fas fa-eraser"></i>
                        取消
                    </button>
                }
            </div>
        </div>)
    }
}